<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<form class="mt-3 mb-3" [formGroup]="userForm" (ngSubmit)="onSubmit()" autocomplete="off">
    <div class="form-group col-md-8">
        <label for="user_id">{{'users.attributes.user_id' |translate}}</label>
        <input type="text" class="form-control" formControlName="user_id" id="user_id"
               [ngClass]="valid('user_id')"
               placeholder="{{'users.input.user_id'|translate}}">
        <small>{{'users.input.small.user_id'|translate:{'minSize':this.minUserIdSize} }}</small>
        <div *ngIf="userForm.get('user_id').invalid" class="invalid-feedback">
            <div *ngIf="userForm.get('user_id').errors.required">
                {{'form.error.required'|translate}}
            </div>
            <div *ngIf="userForm.get('user_id').errors.containsWhitespace">
                {{'form.error.containsWhitespace'|translate}}
            </div>
            <div *ngIf="userForm.get('user_id').errors.userexists">
                {{'form.error.userexists'|translate}}
            </div>
        </div>

    </div>
    <div class="form-group col-md-8">
        <label for="full_name">{{'users.attributes.full_name' |translate}}</label>
        <input type="text" class="form-control" formControlName="full_name" id="full_name"
               [ngClass]="valid('full_name')"
               placeholder="{{'users.input.full_name'|translate}}">
        <small>{{'users.input.small.full_name'|translate}}</small>
    </div>
    <div class="form-group col-md-8">
        <label for="email">{{'users.attributes.email' |translate}}</label>
        <input type="text" class="form-control" formControlName="email" id="email"
               [ngClass]="valid('email')"
               placeholder="{{'users.input.email'|translate}}" autocomplete="off">
    </div>
    <div class="form-group col-md-8">
        <label for="password">{{'users.attributes.password' |translate}}</label>
        <input type="password" class="form-control" formControlName="password" id="password"
               [ngClass]="valid('password')"
               placeholder="{{'users.input.password'|translate}}" autocomplete="new-password">
        <div *ngFor="let error of getErrorsFor('password')" class="invalid-feedback">
            {{error}}
        </div>
    </div>
    <div class="form-group col-md-8">
        <label for="confirm_password">{{'users.attributes.confirm_password' |translate}}</label>
        <input type="password" class="form-control" formControlName="confirm_password" id="confirm_password"
               [ngClass]="valid('confirm_password')"
               placeholder="{{'users.input.confirm_password'|translate}}" autocomplete="new-password">
    </div>
    <div class="form-group col-md-8">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" formControlName="locked" id="locked">
            <label class="form-check-label" for="locked">
                {{'users.attributes.locked'|translate}}
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" formControlName="password_change_required"
                   id="password_change_required" checked>
            <label class="form-check-label" for="password_change_required">
                {{'users.attributes.password_change_required'|translate}}
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" formControlName="validated"
                   id="validated" checked>
            <label class="form-check-label" for="validated">
                {{'users.attributes.validated'|translate}}
            </label>
        </div>
    </div>
    <div class="form-group col-md-8">
        <button class="btn btn-primary" type="submit"
                [attr.disabled]="userForm.valid?null:true">{{'users.add.submit'|translate}}</button>
    </div>

    <ng-template #successTmpl let-userId="user_id">
        User <a [routerLink]="['/security','users','edit',userId]">{{userId}}</a> was added to the list.
    </ng-template>
    <ng-template #errorTmpl let-messages="error_messages">
        <h4 class="alert-heading">{{'users.add.errortitle1'|translate}}</h4>
        <p>{{'users.add.errortitle2'|translate}}</p>
        <ng-container *ngFor="let message of messages; first as isFirst" >
            <hr>
            <p>{{message.message}}</p>
        </ng-container>
    </ng-template>


</form>
